<template>
  <view class="common-progress">
    <div
      :style="{ height: height }"
      class="common-progress__outer common-progress__base"
    >
      <div
        :style="{ height: height, width: height }"
        class="common-progress__end"
      />
      <div class="common-progress__inner" :style="bgStyle" />
      <div :style="innerTextStyle" class="common-progress__text">
        <span :style="textStyle">{{ validPercentage }}%</span>
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { computed } from "vue";

defineOptions({
  name: "common-progress",
});

export type CommonProgressProps = Partial<{
  percentage: number;
  strokeWidth: number;
  strokeColor: string;
  textBackground: string;
  textColor: string;
}>;

const props = withDefaults(defineProps<CommonProgressProps>(), {});

const validPercentage = computed(() => {
  const { percentage } = props;
  return Number(percentage) >= 100 ? 100 : Number(percentage);
});

const height = computed(() => {
  const { strokeWidth } = props;
  if (strokeWidth) {
    return Taro.pxTransform(strokeWidth);
  }
  return undefined;
});

const bgStyle = computed(() => {
  return {
    width: `${validPercentage.value}%`,
    background: props.strokeColor || "",
  };
});

const innerTextStyle = computed(() => {
  const { textBackground, strokeColor } = props;
  return {
    lineHeight: height.value || "",
    left: `${validPercentage.value}%`,
    transform: `translate(-${+validPercentage.value}%, -50%)`,
    background: textBackground || strokeColor || "",
  };
});

const textStyle = computed(() => {
  return {
    color: props.textColor || "",
  };
});
</script>

<style lang="less">
.common-progress {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  &__outer {
    background-color: #f3f3f3;
    border-radius: 24px;
    flex: 1;
    height: 10px;
  }
  &__base {
    height: 20px;
  }
  &__end {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #7ed6c6;
    transform: translate(0, -50%);
  }
  &__inner {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7fd6c7 0%, #5cc4af 100%);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }
  &__text {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    border-radius: inherit;
    border-radius: 24px;
    border: 2px solid #fff;

    font-size: 24px;
    line-height: 34px;
    padding: 0 12px;
    top: 50%;
    background: linear-gradient(90deg, #7fd6c7 0%, #5cc4af 100%);
  }
}
</style>
